import React,{useEffect,useState} from 'react';
// 导入用户统计数据接口
import {getPieDataFn} from '@/api/welcome';
// 引入饼图组件
import Pie from '../../component/pie';
const Welcome = () => {
    const [piedata, setpiedata] = useState({});
    useEffect(() => {
        //调用用户统计数据接口
        getPieDataFn().then(res=>{
            console.log('piedata',res);
            if(res.data.errNo==0){
                setpiedata(res.data.data)
            }
        })
        
    }, []);
    return (
        <div>

            {/* 饼图组件 */}
            {
                piedata.accessFrom ?
                <div style={{ display: 'flex' }}>
                <Pie id='pie1' data={piedata.gender} title='性别占比' lengend={false} name='gender'></Pie>
                <Pie id='pie2' data={piedata.area} title='地域分布' lengend={false} name='area'></Pie>
                <Pie id='pie3' data={piedata.accessFrom} title='访问来源' lengend={false} name='accessFrom'></Pie>  
            </div>:<></>
            }
             {/* <div style={{ display: 'flex' }}>
                <Pie id='pie1' data={piedata.gender} title='性别占比' lengend={false} name='gender'></Pie>
                <Pie id='pie2' data={piedata.area} title='地域分布' lengend={false}></Pie>
                <Pie id='pie3' data={piedata.accessFrom} title='访问来源' lengend={false} name='accessFrom'></Pie>  
            </div> */}
            
            
        </div>
    );
}

export default Welcome;
